<template>
	<view class="zone">
		<Header title="我的记录" color="#fff"></Header>

		<view class="main">
			<!-- 近10场射中环数 -->
			<view class="top">
				<p>近10场射中环数</p>
				<view class="flexbw">
					<view class="item" v-for="item in 6">
						<text>1环</text>
						<image src="http://img.cpgm.cc/panda/static/shoot/1.png" mode="widthFix" />
						<text>100次</text>
					</view>
				</view>
			</view>

			<!-- 近100场射中环数 -->
			<view class="center">
				<p>近100场射中环数</p>
				<view class="flwarp">
					<view class="item" v-for="item in 10">
						<text>1环</text>
						<image src="http://img.cpgm.cc/panda/static/shoot/1.png" mode="widthFix" />
						<text>100次</text>
					</view>
				</view>
			</view>

			<!-- 我的参与记录 -->
			<view class="bot">
				<p>我的参与记录</p>
				<view class="b_box">
					<p>第一期 <text>本期命中1环</text> </p>
					<view class="type">
						<text>投入</text>
						<text>获得</text>
					</view>
					<view class="item">
						<view class="left">
							<image src="http://img.cpgm.cc/panda/static/shoot/log1.png" mode="widthFix" />
							<text> 1 环</text>
							<image src="http://img.cpgm.cc/panda/static/shoot/sj.png" mode="widthFix" />
							<text>1.00</text>
						</view>
						<view class="right">
							<text>5</text>
							<image src="http://img.cpgm.cc/panda/static/shoot/sj.png" mode="widthFix" />
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less">
.zone {
	background: #000;
	min-height: 100vh;
}

.main {
	padding: 10px;
}


// 近10场射中环数
.top {
	padding: 5px;

	p {
		color: #fff;
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 12px;
	}
}

.flexbw {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.item {
		width: 16.5%;
		padding: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		border-radius: 10px;
		box-sizing: border-box;
		

		image {
			width: 100%;
			margin: 2px 0;
		}
		text:nth-child(1) {
			font-size: 16px;
			font-weight: 600;
			color: #000;
		}
		text:nth-child(3) {
			font-size: 14px;
			color: #333333;
		}
	}
}

// 近100场射中环数
.center {
	padding: 5px;
	margin-top: 10px;

	p {
		color: #fff;
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 12px;
	}

	.flwarp {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.item {
			width: 18%;
			background: #fff;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #fff;
			border-radius: 10px;
			margin-bottom: 10px;

			image {
				width: 100%;
				margin: 2px 0;
			}
			text:nth-child(1) {
				font-size: 16px;
				font-weight: 600;
				color: #000;
			}
			text:nth-child(3) {
				font-size: 14px;
				color: #333333;
			}
		}
	}
}

// 我的参与记录
.bot {
	padding: 5px ;

	p {
		color: #fff;
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 12px;
	}

	.b_box {
		background: linear-gradient(180deg, #FFCC99, #EDE0F5);
		box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.82);
		border-radius: 14px;
		padding: 10px;
		border-radius: 10px;

		p {
			color: #333333;
			font-size: 14px;

			text {
				color: #333333;
				font-size: 12px;
				zoom: 0.9;
			}
		}

		.type {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 2px 30px;
			background: #F3E4D5;
			border-radius: 10px;

			text {
				color: #333333;
				font-size: 12px;
			}
		}

		.item {
			background: #FCFCFC;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:2px 15px ;
			margin-top: 3px;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 20px;
				}

				text:nth-child(2) {
					color: #339900;
					font-size: 14px;
					font-weight: 600;
					margin: 0 2px;
				}
				text:nth-child(4) {
					color: #333333;
					font-size: 14px;
					margin-left: 2px;
				}

			}

			.right {
				display: flex;
				align-items: center;

				text {
					font-size: 14px;
					color: #333333;
					margin-right: 10px;
				}

				image {
					width: 20px;
				}
			}
		}
	}
	
}

</style>
